<template>
  <div class="login-page page">
    <a-card>
      <a-form-model layout="horizontal" :model="formInline" @submit="handleSubmit" @submit.native.prevent>
        <div class="title">
          <h1>
            鸿惠丰包装制品有限公司管理系统
          </h1>
        </div>
        <a-form-model-item>
          <a-input id="name" v-model="formInline.name" placeholder="Username">
            <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
          </a-input>
        </a-form-model-item>
        <a-form-model-item>
          <a-input id="password" v-model="formInline.password" type="password" placeholder="Password">
            <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
          </a-input>
        </a-form-model-item>
        <a-form-model-item class="submit">
          <a-button
            type="primary"
            html-type="submit"
            :disabled="formInline.user === '' || formInline.password === ''"
          >
            登录
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </div>
</template>

<script>
import {
  loginReq
} from '@/requests/loginRequests.js';

export default {
  name: "LoginPage",
  props: {

  },
  data() {
    return {
      formInline: {
        name: '',
        password: '',
      },
    };
  },
  computed: {

  },
  mounted() {

  },
  watch: {

  },
  methods: {
    handleSubmit(e) {
      const loaded = this.$message.loading('正在登录', 0);
      loginReq(this.formInline).then((res) => {
        loaded();
        const token = (res.data.token);
        localStorage.setItem('token', token);
        localStorage.setItem('userInfo', `{"name": "${this.formInline.name}"}`);
        this.$router.push({
          name: 'Home'
        });
        this.$store.commit('USERINFO', {
          name: this.formInline.name
        });
        
      }).catch((err) => {
        loaded();
        this.$notification['error']({
          message: '登录',
          description:
            `登录失败，${err.response.data.message}`,
        });
      })
    },
  },
  components: {

  },
};
</script>

<style scoped lang="scss">
.login-page {
  height: 100vh;
  background: url('../assets/bg.jpg') fixed;
  background-size: 100%;

  >.ant-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 50px 50px 10px 50px;

    .title {
      margin-bottom: 50px;
      h1 {
        color: #1d89e2;
      }
    }

    .submit {
      display: flex;
      justify-content: flex-end;
    }

    border-radius: 8%;
  }
}
</style>
